function FindSeriesMenu({ isOpen, onClose }) {
    const [isSmallScreen, setIsSmallScreen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);
    const [menuPosition, setMenuPosition] = React.useState({ top: 0, left: 0 });
    const buttonRef = React.useRef(null);

    React.useEffect(() => {
        const checkScreenSize = () => {
            setIsSmallScreen(window.innerWidth < 768);
        };

        // Initial check
        checkScreenSize();

        // Add resize listener
        window.addEventListener('resize', checkScreenSize);

        // Cleanup
        return () => window.removeEventListener('resize', checkScreenSize);
    }, []);

    React.useEffect(() => {
        if (isOpen) {
            setIsAnimating(true);
            document.body.style.overflow = 'hidden';

            // Calculate menu position based on button position
            const button = document.querySelector('[data-name="find-series-button"]');
            if (button && !isSmallScreen) {
                const rect = button.getBoundingClientRect();
                setMenuPosition({
                    top: rect.bottom + window.scrollY + 8, // 8px gap
                    left: rect.left + window.scrollX
                });
            }
        } else {
            document.body.style.overflow = '';
        }

        return () => {
            document.body.style.overflow = '';
        };
    }, [isOpen, isSmallScreen]);

    if (!isOpen && !isAnimating) return null;

    const handleTransitionEnd = () => {
        if (!isOpen) {
            setIsAnimating(false);
        }
    };

    const modalContent = (
        <div className="space-y-3 w-full" data-name="games-list">
            <a 
                href="https://5ojhab53hvdn.trickle.host" 
                target="_blank"
                className="block p-4 bg-gray-50 dark:bg-gray-700/50 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-xl transition-colors"
                data-name="game-item"
            >
                <div className="flex items-center justify-between">
                    <div>
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
                            Tone Find
                        </h3>
                        <p className="text-sm text-gray-600 dark:text-gray-400">
                            Test your musical pitch perception
                        </p>
                    </div>
                    <svg 
                        className="w-5 h-5 text-gray-400" 
                        fill="none" 
                        stroke="currentColor" 
                        viewBox="0 0 24 24"
                    >
                        <path 
                            strokeLinecap="round" 
                            strokeLinejoin="round" 
                            strokeWidth="2" 
                            d="M9 5l7 7-7 7"
                        />
                    </svg>
                </div>
            </a>
        </div>
    );

    return (
        <div 
            className={`fixed inset-0 z-50 ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
            data-name="find-series-menu"
        >
            {/* Backdrop - only show on mobile */}
            {isSmallScreen && (
                <div 
                    className={`fixed inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm transition-opacity duration-300 ${
                        isOpen ? 'opacity-100' : 'opacity-0'
                    }`}
                    onClick={onClose}
                />
            )}

            {isSmallScreen ? (
                // Mobile bottom sheet
                <div 
                    className={`fixed inset-x-0 bottom-0 transform transition-transform duration-300 ease-out ${
                        isOpen ? 'translate-y-0' : 'translate-y-full'
                    }`}
                    onTransitionEnd={handleTransitionEnd}
                    data-name="bottom-sheet"
                >
                    <div className="bg-white dark:bg-gray-800 rounded-t-2xl shadow-xl max-h-[85vh] overflow-y-auto">
                        <div className="sticky top-0 z-10 bg-white dark:bg-gray-800 pt-3 px-4 pb-4 border-b border-gray-200 dark:border-gray-700">
                            {/* Handle bar */}
                            <div className="w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full mx-auto mb-4" />
                            
                            <div className="flex items-center justify-between">
                                <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                                    Find Series
                                </h2>
                                <AllGamesLink />
                            </div>
                        </div>
                        
                        <div className="p-4">
                            {modalContent}
                        </div>
                    </div>
                </div>
            ) : (
                // Desktop dropdown menu
                <div 
                    className="fixed inset-0"
                    onClick={onClose}
                    data-name="desktop-menu-container"
                >
                    <div 
                        className={`absolute w-80 transform transition-all duration-200 ${
                            isOpen 
                                ? 'opacity-100 scale-100' 
                                : 'opacity-0 scale-95'
                        }`}
                        style={{
                            top: `${menuPosition.top}px`,
                            left: `${menuPosition.left}px`
                        }}
                        onClick={e => e.stopPropagation()}
                        data-name="desktop-menu"
                    >
                        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
                            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
                                <div className="flex items-center justify-between">
                                    <h2 className="text-xl font-bold text-gray-900 dark:text-white">
                                        Find Series
                                    </h2>
                                    <AllGamesLink />
                                </div>
                            </div>
                            <div className="p-4">
                                {modalContent}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}
